<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>源码来自：https://codepen.io/wheatup/pen/GRyxmRb</title>
	</head>
	<style>
		@import url("https://fonts.googleapis.com/css2?family=Grape+Nuts&family=Norican&display=swap");

		*,
		*::before,
		*::after {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		ul,
		ol {
			list-style: none;
			font-family: "Grape Nuts", cursive;
			font-size: 2.4rem;
			color: midnightblue;
		}

		html {
			font-size: 62.5%;
		}

		@media only screen and (max-width: 624px) {
			html {
				font-size: 50%;
			}
		}

		html body {
			font-size: 1.6rem;
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)), url(https://assets.codepen.io/2509128/paper.jpeg);
		}

		h1 {
			margin-top: 2rem;
			font-family: "Norican", cursive;
			color: saddlebrown;
			position: relative;
			display: flex;
			align-items: center;
			font-size: 4rem;
		}

		h1::before,
		h1::after {
			content: "";
			display: block;
			width: 5rem;
			height: 2px;
			background-color: currentColor;
			margin: 0 1rem;
		}

		ul:not(ul ul) {
			padding: 2rem;
			padding-bottom: 4rem;
			display: grid;
			grid-template-columns: max-content;
			z-index: 1;
			position: relative;
			perspective: 50vw;
			transform-style: preserve-3d;
		}

		ul:not(ul ul) .done {
			text-decoration: line-through;
		}

		ul:not(ul ul)>li {
			--levitate: 0;
			padding: 1.2rem 2rem;
			background-color: pink;
			position: relative;
			transform-style: preserve-3d;
			cursor: pointer;
			position: relative;
			transition: transform 0.3s;
		}

		ul:not(ul ul)>li::after {
			content: "";
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			opacity: 0.1;
			transition: opacity 0.3s;
			z-index: 1;
			background-image: linear-gradient(to left, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
		}

		ul:not(ul ul)>li:hover {
			--levitate: 1;
		}

		ul:not(ul ul)>li:hover::before {
			transform: translate3d(6rem, 1rem, -1px) scale(calc(1 - var(--levitate) * 0.1)) rotate(1.5deg);
			filter: blur(8px);
		}

		ul:not(ul ul)>li:hover::after {
			opacity: 1;
		}

		ul:not(ul ul)>li.big {
			background-color: lightgreen;
			padding: 1.6rem 2rem;
			padding-bottom: 3rem;
		}

		ul:not(ul ul)>li ul {
			margin-top: 0.5em;
			margin-left: 1em;
			font-size: 0.8em;
		}

		ul:not(ul ul)>li ul li:first-letter {
			font-size: 1.4em;
		}

		ul:not(ul ul)>li:not(:first-of-type) {
			margin-top: 3rem;
		}

		ul:not(ul ul)>li:nth-child(3n) {
			transform: translate3d(-5px, calc(var(--levitate) * -5px), calc(var(--levitate) * 3rem)) rotate(-0.6deg) rotateX(calc(var(--levitate) * 6deg)) rotateY(calc(var(--levitate) * -3deg));
		}

		ul:not(ul ul)>li:nth-child(3n-1) {
			transform: translate3d(7px, calc(var(--levitate) * -5px), calc(var(--levitate) * 3rem)) rotate(-0.5deg) rotateX(calc(var(--levitate) * 6deg)) rotateY(calc(var(--levitate) * -3deg));
		}

		ul:not(ul ul)>li:nth-child(3n-2) {
			transform: translate3d(0px, calc(var(--levitate) * -5px), calc(var(--levitate) * 3rem)) rotate(0.5deg) rotateX(calc(var(--levitate) * 6deg)) rotateY(calc(var(--levitate) * -3deg));
		}

		ul:not(ul ul)>li::before {
			content: "";
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			transition: all 0.3s;
			height: calc(100% - 2px);
			background-color: rgba(0, 0, 0, 0.4);
			z-index: -1;
			transform-origin: bottom left;
			transform: translate3d(8px, 2px, -1px) rotate(1deg);
			filter: blur(2px);
		}
	</style>
	<body>
		<h1>纸张</h1>
		<ul>
			<li class="big">Groceries
				<ul>
					<li class="done">3 Tomatoes</li>
					<li>1 bunch of cherries</li>
					<li>6 onions</li>
					<li class="done">3 heads of garlic</li>
					<li>1 bag spring mix</li>
				</ul>
			</li>
			<li class="done">Cancel gym membership</li>
			<li>Clean gutters</li>
			<li class="done">Take package to the post office</li>
			<li class="done">Call Avery about Ali's party (afternoon)</li>
			<li>Sort recycling & put out trash</li>
		</ul>
	</body>
</html>
